<!-- 表格组件 -->
<script lang="tsx" setup>
import { toRaw } from 'vue';

import type { TableColumnOption } from '@/components/table-widget/table-widget.vue';
import TableWidget from '@/components/table-widget/table-widget.vue';
import {
  EQP_CHECK_STATUS_OPTIONS,
  EQP_CHECK_TYPE_OPTIONS,
  getEnumOptionsField,
} from '@/config/enum-options';

import { injectState } from '../state';

defineOptions({ name: 'Sheet' });

const {
  selectedList,
  tableRef,
  detailDialogRef,
  page: { records, isLoading, execute },
} = injectState()!;

watch(records, () => tableRef.value?.table?.clearSelection());

const columns: TableColumnOption<(typeof records.value)[0]>[] = [
  {
    type: 'selection',
    fixed: 'left',
    noExport: true,
  },
  {
    label: '序号',
    type: 'index',
    fixed: 'left',
    width: 80,
  },
  {
    label: '企业名称',
    formatter: (row) => row.enterpriseName ?? '-',
  },
  {
    label: '类别',
    formatter: (row) => getEnumOptionsField(EQP_CHECK_TYPE_OPTIONS, 'label', row.type) ?? '-',
  },
  {
    label: '时间',
    formatter: (row) => `${row.checkTimeStart}--${row.checkTimeEnd}`,
  },
  {
    label: '地点',
    formatter: (row) => row.checkAddress ?? '-',
  },
  {
    label: '方案',
    formatter: (row) => row.checkPlan ?? '-',
  },
  {
    label: '状态',
    formatter: (row) => getEnumOptionsField(EQP_CHECK_STATUS_OPTIONS, 'label', row.status) ?? '-',
  },

  {
    label: '操作',
    export: false,
    fixed: 'right',
    width: '200',
    noExport: true,
    formatter(row) {
      return (
        <>
          <el-button
            size="small"
            type="primary"
            text
            onClick={() => detailDialogRef.value?.trigger('read', row)}
          >
            详情
          </el-button>
        </>
      );
    },
  },
];
</script>

<template>
  <TableWidget
    ref="tableRef"
    v-loading="isLoading"
    :data="records"
    :columns="columns"
    h="100%!"
    @selection-change="(rows:any) => (selectedList = toRaw(rows))"
  />
</template>
